<template>
	<!-- 频道列表组件，遍历每一个item -->
	<div class="find-list" :style="{height}">
		<div class="item" v-for="item in channels" :key="item.id" :style="[{width}]">
			<Channel :channel="item" :checkedId="checkedId" @handleChannel="handleChannel"/>
		</div>
	</div>
</template>

<script>
import Channel from './Channel'

export default{
	props:{
		columns: {
			type: Number,
			default: 2
		},
		showDown:{
			type: Boolean,
			default: false
		},
		channels: {
			type: Array,
			required: true
		},
		checkedId: {
			type: Number,
			default: 100
		}
	},
	computed:{
		// 根据列数设置宽度
		width(){
			return 100/this.columns + '%';
		},
		// 根据展开收起，计算列表总高度
		height(){
			let cols = Math.ceil(this.channels.length/this.columns);
			return this.showDown ? '120px' : cols * 40 + 'px';
		}
	},
	methods:{
		handleChannel(id){
			this.$emit('handleChannel', id);
		}
	},
	components:{
		Channel
	}
}
</script>

<style lang="less" scoped>
.find-list{
	width: 100%;
	transition: height .5s;
	overflow: hidden;
	.item{
		display: inline-block;
		line-height: 40px;
	}
}
</style>
